User inputs are the key to building interactive apps with React. In this guide, we will learn about many different types of inputs, as well as corresponding event handlers to capture user inputs. You will also learn about controlled and uncontrolled inputs. Without further ado, let’s get started.
Buttons
Buttons are the simplest and probably most commonly used inputs in React. They’re very useful for variety of use-cases. For example, you can set up a button to hide or show a component when user clicks the button. Or add specified product to the cart when user clicks ‘add to cart’ button.
This type of input is great for one-off actions. Click is a singular user input that doesn’t really vary. All clicks are the same.
You need to define an onClick event handler to respond to click events. The event handler needs to be set to the element. Keep in mind that you need to use curly braces to embed dynamic expressions in JSX. And the onClick attribute should be set to a callback function that runs only when the button is clicked. Don’t set the onClick attribute to the function call itself. Otherwise the event handler will run every time the button is rendered.
Input field
Another very common type of input is a single input field. It is used for many purposes, from authentication to collecting user data.
A value of user input in a field can change as users add or delete their input. That is why you need to track a change event. If defined, onChange event handler will fire every time there’s a change and update the state. Typically current inputs are stored in the state. This way, changes in the input field trigger a re-render of the entire component. This is useful if you’re using the input value to dynamically change structure or contents on the page.
Most often React developers associate value of an input field to the state. This is only possible by getting current input value via event.target.value and storing it in the state. If you are unaware of how this work, you can check out Simplefrontend guide that explains the process.
Form
Form is usually not a component, but a collection of different types of components. Its main purpose is to collect information from users and do something when the form is submitted. There’s also usually a button to submit the form, called a submit button. You do need to specify its type using the type=”submit” attribute.
You can usually set an onSubmit event handler on the
Most common is to save current inputs and then clear the form so it can be submitted again. You also need the onSubmit event handler to prevent default behavior of reloading the page.
Checkbox
Another useful type of input is checkbox. It is most commonly used for turning certain features on and off, or letting users provide information about their preferences that can be answered as yes or no. I’ve seen checkboxes used for implementing dark mode, for example. When the checkbox is ticked, the website has dark background and white text, and vice versa.
There are different ways you can handle checkbox events. One way is to get the value of the checkbox that was selected. Another, more common way is to get current status of the checkbox – whether it is selected or not. This guide goes into detail on handling checkbox onChange in React.
You need to store current checkbox value in the state. That is the only way to use it for dynamic rendering or conditional styles. Current state of checkbox is usually stored as a Boolean – true if the checkbox is selected, and false if it is not. Otherwise individual value of the checkbox can be an integer or a string as well.
Radio buttons
This is a very useful type of input. It lets users choose one of the many pre-defined options. The most common type of event is change. You need to capture user input any time they pick one of the radio buttons or change their selection from one to another.
When handling radio buttons, you need to access value of the currently selected option. Information about the event is available on SyntheticEvent object passed to all event handlers.
Labels for inputs
Most inputs need a label. Otherwise users won’t know what to enter. It’s important to give users instructions on the right input. Sometimes you can also display custom error messages to guide users to the right answer. For example, dynamic validation allows you to check if the email field contains ‘@’ or similar necessary symbols. If it doesn’t, tell users to enter the right email.
Don’t forget that we use the htmlFor attribute to associate labels with inputs in React. Not for attribute, like we do in HTML. This is done to avoid confusion between the for loop and for attribute in React.
What are controlled inputs
React has its preferences when it comes to working with input elements. Because input elements are so important for implementing interactive features, React advises developers to implement a two-way binding between inputs and the state. An input field gets its value from the state. At the same time, changes to the input field update the state, which updates the input field. This type of relationship helps React ensure consistency of data.
This approach (also called React 2 way binding) also allows you to dynamically validate values in the input field.
Of course, input like button is an exception, because it doesn’t have an explicitly set value.
Finally, associating input values with the state allows you to easily set default values for the input. In case of class components, you can simply set the default value in the class object. For functional components, the argument to the useState() hook is set as the default value for the state variable. Advantage of using the hook is that it also returns a function to easily update that specific state value. So you don’t have to deal with the setState() method, which can be confusing.
Final words
That sums up everything I needed to share about inputs in React. I hope the guide was helpful and wish you success in your developer journey.
Top comments (0)